<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul {width:800px;margin:0 auto;list-style-type:none;overflow:hidden;}
        ul li {float:left;margin-right:28px;border:1px solid #aaa;}
        ul li.active {border:1px solid #0ff;}
        #mov {position:absolute;width:200px;height:200px;display:none;}
    </style>
    <script>
        window.onload = function() {
            var oLi = document.getElementsByTagName("li");
            var mov = document.getElementById("mov");
            for(var i=0;i<oLi.length;i++) {
                oLi[i].index = i;
                oLi[i].onmouseover = function(ev) {
                    this.className = "active";
                    //this.style.borderColor = "#0ff";如果这么处理，border会闪烁
                    // var top = document.documentElement.scrollTop || document.this.scrollTop;
                    // var left = document.documentElement.scrollLeft || document.this.scrollLeft;
                    // 会卡。。。。。。
                    //mov.style.left = oEvent.clientX+"px";
                    //mov.style.top = oEvent.clientY+"px";
                    var oImg = document.createElement("img");

                    var img = new Image();
                    img.src = oImg.src = oLi[this.index].getElementsByTagName("img")[0].src.replace(".jpg","_big.jpg");
                    mov.appendChild(oImg);
                    mov.style.display = "block";
                };

                oLi[i].onmousemove = function(ev) {
                    var oEvent = ev ||　event;
                    var oP = document.getElementsByTagName("p")[0];
                    var x = oEvent.clientX;
                    var y = oEvent.clientY;
                    oP.innerHTML = x+","+y;
                    mov.style.left = x +10 + "px";
                    mov.style.top = y +10+ "px";

                }  
                oLi[i].onmouseout = function() {
                    this.className = "";
                    mov.style.display = "";
                    mov.removeChild(mov.lastChild);
                };
            }
        }
    </script>
</head>
<body>
    <ul>
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
        <li><img src="4.jpg" alt=""></li>
    </ul>
    <div id="mov"></div>
    <p></p>
</body>
</html>

<!-- <style>
    #div1{
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
    }
    </style>
    <script>
    document.onmousemove=function(ev)
    {
        var oDiv=document.getElementById('div1');
        var oEvent=ev||event;

        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

        oDiv.style.left=oEvent.clientX+scrollLeft+'px';
        oDiv.style.top=oEvent.clientY+scrollTop+'px';
    }
    </script>
 </head>
 <body style="width:2000px; height:2000px">
    <div id="div1"></div>
 </body> -->